import React from 'react';
import {connect} from 'dva';
import {Form, Input, Button, Radio, Modal, message} from 'antd';
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@connect(state => ({
    adminManage: state.adminManage,
}))
@Form.create()
export default class AdminSaveEdit extends React.Component {
    state = {
        loading: false,
        visible: false,
        pagination: this.props.adminManage.pagination,
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    handleSubmit = (e) => {
        e.preventDefault();
        const {dispatch, form} = this.props;
        form.validateFields((err, filedValue) => {
            if (err) return;
            const values = {
                ...filedValue,
            };
            this.setState({loading: true});
            dispatch({
                type: 'adminManage/saveAdmin',
                payload: values,
                callback: (response) => {
                    if (response.result == 0) {
                        message.success('新增成功');
                        this.handleSuccess();
                        this.setState({loading: false, visible: false});
                    } else {
                        message.error('新增失败');
                        this.setState({loading: false});
                    }
                }
            });
        });
    };

    handleSuccess = () => {
        const {dispatch, searchValues, form} = this.props;
        form.resetFields();
        const params = {
            ...searchValues,
        };
        dispatch({
            type: 'adminManage/queryAdminList',
            payload: params,
        });
    };

    handleCancel = () => {
        this.setState({visible: false});
    };

    render() {
        const {visible, loading, data} = this.state;
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <div>
                <AuthButton type="primary" auth="management.new" onClick={this.showModal} icon="plus">
                    新建
                </AuthButton>
                <Modal
                    visible={visible}
                    title="新建管理员"
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="管理员名"
                        >
                            {(getFieldDecorator("userName", {
                                rules: [{
                                    required: true, message: '请填写管理员名'
                                }],
                            }))(<Input/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="邮箱"
                        >
                            {(getFieldDecorator("email", {
                                rules: [{
                                    type: 'email', message: '请输入正确格式的邮箱',
                                }],
                            }))(<Input/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="密码"
                        >
                            {(getFieldDecorator("password", {
                                rules: [{
                                    required: true, message: '请填写管理员密码'
                                }],
                            }))(<Input/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="管理员角色"
                        >
                            {(getFieldDecorator("roleId", {initialValue: 0}))(<RadioGroup>
                                <Radio value={0}>平台管理员</Radio>
                                <Radio value={1}>供应商管理员</Radio>
                                <Radio value={2}>运营人员</Radio>
                            </RadioGroup>)}
                        </FormItem>
                        <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                            <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
                            <Button style={{marginLeft: 8}} onClick={this.handleCancel}>取消</Button>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}
